// 暗色主题优化样式
[data-theme="dark"] {
  // ===== 全局页面背景 =====
  body,
  html {
    background-color: var(--el-bg-color-page);
    color: var(--el-text-color-primary);
  }

  #app {
    background-color: var(--el-bg-color-page);
  }

  // ===== 布局组件优化 =====
  .layout-container {
    background-color: var(--el-bg-color-page);
  }

  .layout-header {
    background-color: var(--el-bg-color);
    border-bottom-color: var(--el-border-color-light);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

    h1 {
      color: var(--el-text-color-primary);
    }

    .header-left .el-button {
      color: var(--el-text-color-regular);

      &:hover {
        color: var(--el-color-primary);
        background-color: var(--el-fill-color-light);
      }
    }

    .user-info {
      color: var(--el-text-color-primary);

      &:hover {
        background-color: var(--el-fill-color-light);
      }
    }
  }

  .layout-sidebar {
    background-color: var(--el-menu-bg-color);
    border-right-color: var(--el-border-color-light);
  }

  .layout-main {
    background-color: var(--el-bg-color-page);
  }

  // ===== 标签栏优化 =====
  .tags-view-container {
    background-color: var(--el-bg-color);
    border-bottom-color: var(--el-border-color-light);

    .tags-view-item {
      background-color: var(--el-bg-color);
      border-color: var(--el-border-color-light);
      color: var(--el-text-color-regular);

      &:hover {
        color: var(--el-color-primary);
        border-color: var(--el-color-primary-light-7);
        background-color: var(--el-color-primary-light-9);
      }

      &.active {
        background-color: var(--el-color-primary);
        border-color: var(--el-color-primary);
        color: #ffffff;
      }
    }

    .contextmenu {
      background-color: var(--el-bg-color);
      border-color: var(--el-border-color-light);

      li {
        color: var(--el-text-color-regular);

        &:hover {
          background-color: var(--el-color-primary-light-9);
          color: var(--el-color-primary);
        }
      }
    }
  }

  // ===== 面包屑优化 =====
  .breadcrumb-container {
    background-color: var(--el-bg-color);
    border-bottom-color: var(--el-border-color-light);
  }

  // ===== 主内容区域优化 =====
  .app-main {
    background-color: var(--el-bg-color-page);
  }

  .app-container,
  .page-container,
  .content-wrapper {
    background-color: var(--el-bg-color);
    border-color: var(--el-border-color-light);
    color: var(--el-text-color-primary);
  }

  // ===== 全局滚动条优化 =====
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background-color: #262626;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #424242;
    border-radius: 4px;

    &:hover {
      background-color: #595959;
    }
  }

  // ===== 表格样式优化 =====
  .el-table {
    background-color: var(--el-table-bg-color);
    color: var(--el-text-color-primary);

    th.el-table__cell {
      background-color: var(--el-table-header-bg-color) !important;
      color: var(--el-table-header-text-color) !important;
      border-bottom: 1px solid var(--el-border-color-light);
    }

    td.el-table__cell {
      background-color: var(--el-table-tr-bg-color);
      border-bottom: 1px solid var(--el-border-color-lighter);
      color: var(--el-text-color-regular);
    }

    .el-table__row {
      background-color: var(--el-table-tr-bg-color);

      &:hover td {
        background-color: var(--el-table-row-hover-bg-color) !important;
      }
    }

    .el-table__border {
      border-color: var(--el-border-color-light);
    }

    &::before {
      background-color: var(--el-border-color-light);
    }

    &::after {
      background-color: var(--el-border-color-light);
    }

    // 修复固定列阴影
    .el-table__fixed,
    .el-table__fixed-right {
      box-shadow: var(--el-table-fixed-box-shadow);

      &::before {
        background-color: var(--el-border-color-light);
      }
    }

    // 空状态优化
    .el-table__empty-block {
      background-color: var(--el-table-tr-bg-color);
      color: var(--el-text-color-secondary);
    }
  }

  // ===== 卡片样式优化 =====
  .el-card {
    background-color: var(--el-card-bg-color);
    border-color: var(--el-card-border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    .el-card__header {
      background-color: var(--el-card-bg-color);
      border-bottom-color: var(--el-border-color-light);
      color: var(--el-text-color-primary);
    }

    .el-card__body {
      background-color: var(--el-card-bg-color);
      color: var(--el-text-color-regular);
    }
  }

  // ===== 菜单样式优化 =====
  .el-menu {
    background-color: var(--el-menu-bg-color);
    border-right-color: var(--el-menu-border-color);

    .el-menu-item,
    .el-sub-menu__title {
      color: var(--el-menu-text-color);

      &:hover {
        background-color: var(--el-menu-hover-bg-color);
      }

      &.is-active {
        background-color: rgba(82, 158, 255, 0.1);
        color: var(--el-menu-active-color);
      }
    }

    .el-sub-menu .el-menu {
      background-color: transparent;
    }

    .el-menu-item-group__title {
      color: var(--el-text-color-secondary);
    }
  }

  // ===== 输入框样式优化 =====
  .el-input {
    .el-input__wrapper {
      background-color: var(--el-input-bg-color);
      border-color: var(--el-input-border-color);
      box-shadow: 0 0 0 1px var(--el-input-border-color) inset;

      &:hover {
        border-color: var(--el-input-hover-border-color);
        box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
      }

      &.is-focus {
        border-color: var(--el-input-focus-border-color);
        box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
      }
    }

    .el-input__inner {
      color: var(--el-text-color-primary);

      &::placeholder {
        color: var(--el-text-color-placeholder);
      }
    }
  }

  // ===== 选择框样式优化 =====
  .el-select {
    .el-input .el-input__wrapper {
      background-color: var(--el-input-bg-color);
    }

    .el-input .el-input__inner {
      color: var(--el-text-color-primary);
    }
  }

  .el-select-dropdown {
    background-color: var(--el-dropdown-bg-color);
    border-color: var(--el-dropdown-border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

    .el-select-dropdown__item {
      color: var(--el-text-color-regular);

      &:hover {
        background-color: var(--el-fill-color-light);
      }

      &.selected {
        background-color: rgba(82, 158, 255, 0.1);
        color: var(--el-color-primary);
      }
    }
  }

  // ===== 按钮样式优化 =====
  .el-button {
    &--default {
      background-color: var(--el-button-bg-color);
      border-color: var(--el-button-border-color);
      color: var(--el-text-color-primary);

      &:hover {
        background-color: var(--el-button-hover-bg-color);
        border-color: var(--el-button-hover-border-color);
      }

      &:active {
        background-color: var(--el-button-active-bg-color);
        border-color: var(--el-button-active-border-color);
      }
    }

    &--primary {
      background-color: var(--el-color-primary);
      border-color: var(--el-color-primary);

      &:hover {
        background-color: var(--el-color-primary-light-3);
        border-color: var(--el-color-primary-light-3);
      }
    }
  }

  // ===== 分页器样式优化 =====
  .el-pagination {
    .el-pager li,
    .btn-prev,
    .btn-next {
      background-color: var(--el-pagination-button-bg-color);
      color: var(--el-pagination-button-color);
      border-color: var(--el-border-color-light);

      &:hover:not(.disabled) {
        color: var(--el-pagination-hover-color);
        background-color: var(--el-fill-color-light);
      }

      &.is-active {
        background-color: var(--el-color-primary);
        color: #ffffff;
        border-color: var(--el-color-primary);
      }

      &.disabled {
        background-color: var(--el-pagination-button-disabled-bg-color);
        color: var(--el-pagination-button-disabled-color);
      }
    }

    .el-select .el-input .el-input__wrapper {
      background-color: var(--el-pagination-button-bg-color);
    }
  }

  // ===== 对话框样式优化 =====
  .el-dialog {
    background-color: var(--el-dialog-bg-color);
    border: 1px solid var(--el-border-color-light);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

    .el-dialog__header {
      background-color: var(--el-dialog-bg-color);
      border-bottom-color: var(--el-border-color-light);

      .el-dialog__title {
        color: var(--el-text-color-primary);
      }

      .el-dialog__headerbtn .el-dialog__close {
        color: var(--el-text-color-regular);

        &:hover {
          color: var(--el-text-color-primary);
        }
      }
    }

    .el-dialog__body {
      background-color: var(--el-dialog-bg-color);
      color: var(--el-text-color-regular);
    }

    .el-dialog__footer {
      background-color: var(--el-dialog-bg-color);
      border-top-color: var(--el-border-color-light);
    }
  }

  .el-overlay {
    background-color: var(--el-overlay-color);
  }

  // ===== 抽屉样式优化 =====
  .el-drawer {
    background-color: var(--el-dialog-bg-color);

    .el-drawer__header {
      border-bottom-color: var(--el-border-color-light);

      span {
        color: var(--el-text-color-primary);
      }

      .el-drawer__close-btn {
        color: var(--el-text-color-regular);

        &:hover {
          color: var(--el-text-color-primary);
        }
      }
    }

    .el-drawer__body {
      color: var(--el-text-color-regular);
    }
  }

  // ===== 表单样式优化 =====
  .el-form-item__label {
    color: var(--el-text-color-regular);
  }

  .el-form-item__error {
    color: var(--el-color-danger);
  }

  // ===== 标签样式优化 =====
  .el-tag {
    background-color: var(--el-fill-color);
    border-color: var(--el-border-color-light);
    color: var(--el-text-color-primary);

    &--success {
      background-color: rgba(82, 196, 26, 0.1);
      border-color: var(--el-color-success);
      color: var(--el-color-success);
    }

    &--warning {
      background-color: rgba(250, 173, 20, 0.1);
      border-color: var(--el-color-warning);
      color: var(--el-color-warning);
    }

    &--danger {
      background-color: rgba(255, 77, 79, 0.1);
      border-color: var(--el-color-danger);
      color: var(--el-color-danger);
    }

    &--info {
      background-color: rgba(24, 144, 255, 0.1);
      border-color: var(--el-color-info);
      color: var(--el-color-info);
    }
  }

  // ===== 开关样式优化 =====
  .el-switch {
    .el-switch__core {
      background-color: var(--el-fill-color-dark);
      border-color: var(--el-border-color-base);

      .el-switch__action {
        background-color: #ffffff;
      }
    }

    &.is-checked .el-switch__core {
      background-color: var(--el-color-primary);
      border-color: var(--el-color-primary);
    }
  }

  // ===== 头像样式优化 =====
  .el-avatar {
    background-color: var(--el-fill-color-light);
    color: var(--el-text-color-primary);
  }

  // ===== 工具提示样式 =====
  .el-tooltip__popper {
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    border: 1px solid var(--el-border-color-base);

    .el-tooltip__arrow::before {
      background-color: rgba(0, 0, 0, 0.8);
      border-color: var(--el-border-color-base);
    }
  }

  // ===== 分割线样式 =====
  .el-divider {
    border-color: var(--el-border-color-light);
  }

  // ===== 空状态样式 =====
  .el-empty {
    .el-empty__description p {
      color: var(--el-text-color-secondary);
    }
  }

  // ===== 加载样式 =====
  .el-loading-mask {
    background-color: rgba(0, 0, 0, 0.7);

    .el-loading-spinner {
      .el-loading-text {
        color: var(--el-text-color-primary);
      }

      .path {
        stroke: var(--el-color-primary);
      }
    }
  }

  // ===== 自定义组件样式优化 =====
  .search-card,
  .table-card {
    background-color: var(--el-bg-color);
    border-color: var(--el-border-color-light);
  }

  .search-bar {
    .search-item .label {
      color: var(--el-text-color-regular);
    }
  }

  .table-header {
    color: var(--el-text-color-primary);
    border-bottom-color: var(--el-border-color-light);
  }

  .pagination-wrapper {
    background-color: var(--el-bg-color);
  }

  // ===== 面包屑样式 =====
  .el-breadcrumb {
    .el-breadcrumb__item {
      .el-breadcrumb__inner {
        color: var(--el-text-color-secondary);

        &:hover {
          color: var(--el-color-primary);
        }
      }

      &:last-child .el-breadcrumb__inner {
        color: var(--el-text-color-primary);
      }
    }

    .el-breadcrumb__separator {
      color: var(--el-text-color-placeholder);
    }
  }

  // ===== 页面标题样式 =====
  .page-title {
    color: var(--el-text-color-primary);
  }

  .page-description {
    color: var(--el-text-color-secondary);
  }

  // ===== 下拉菜单优化 =====
  .el-dropdown-menu {
    background-color: var(--el-dropdown-bg-color);
    border-color: var(--el-dropdown-border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

    .el-dropdown-menu__item {
      color: var(--el-text-color-regular);

      &:hover {
        background-color: var(--el-fill-color-light);
        color: var(--el-color-primary);
      }

      &.is-disabled {
        color: var(--el-text-color-disabled);
      }
    }
  }

  // ===== 气泡确认框优化 =====
  .el-popconfirm {
    .el-popconfirm__main {
      background-color: var(--el-bg-color);
      color: var(--el-text-color-primary);
    }
  }

  .el-popper {
    background-color: var(--el-bg-color);
    border-color: var(--el-border-color-light);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    color: var(--el-text-color-primary);
  }

  // ===== 通知组件优化 =====
  .el-notification {
    background-color: var(--el-bg-color);
    border-color: var(--el-border-color-light);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    .el-notification__title {
      color: var(--el-text-color-primary);
    }

    .el-notification__content {
      color: var(--el-text-color-regular);
    }

    .el-notification__closeBtn {
      color: var(--el-text-color-placeholder);

      &:hover {
        color: var(--el-text-color-primary);
      }
    }
  }

  // ===== 消息提示优化 =====
  // .el-message {
  //   background-color: var(--el-bg-color);
  //   border-color: var(--el-border-color-light);
  //   color: var(--el-text-color-primary);
  //   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  //   &.el-message--success {
  //     background-color: rgba(82, 196, 26, 0.1);
  //     border-color: var(--el-color-success);
  //     color: var(--el-color-success);
  //   }
  //   &.el-message--warning {
  //     background-color: rgba(250, 173, 20, 0.1);
  //     border-color: var(--el-color-warning);
  //     color: var(--el-color-warning);
  //   }
  //   &.el-message--error {
  //     background-color: rgba(255, 77, 79, 0.1);
  //     border-color: var(--el-color-danger);
  //     color: var(--el-color-danger);
  //   }
  //   &.el-message--info {
  //     background-color: rgba(24, 144, 255, 0.1);
  //     border-color: var(--el-color-info);
  //     color: var(--el-color-info);
  //   }
  // }

  // ===== 确认框优化 =====
  .el-message-box {
    background-color: var(--el-dialog-bg-color);
    border-color: var(--el-border-color-light);

    .el-message-box__header {
      .el-message-box__title {
        color: var(--el-text-color-primary);
      }

      .el-message-box__headerbtn .el-message-box__close {
        color: var(--el-text-color-regular);

        &:hover {
          color: var(--el-text-color-primary);
        }
      }
    }

    .el-message-box__content {
      color: var(--el-text-color-regular);
    }

    .el-message-box__btns {
      .el-button--default {
        background-color: var(--el-button-bg-color);
        border-color: var(--el-button-border-color);
        color: var(--el-text-color-primary);
      }
    }
  }

  // ===== 步骤条优化 =====
  .el-steps {
    .el-step__head {
      &.is-process {
        color: var(--el-color-primary);
        border-color: var(--el-color-primary);
      }

      &.is-wait {
        color: var(--el-text-color-placeholder);
        border-color: var(--el-border-color-light);
      }

      &.is-success {
        color: var(--el-color-success);
        border-color: var(--el-color-success);
      }
    }

    .el-step__title {
      &.is-process {
        color: var(--el-text-color-primary);
      }

      &.is-wait {
        color: var(--el-text-color-placeholder);
      }

      &.is-success {
        color: var(--el-color-success);
      }
    }
  }

  // ===== 进度条优化 =====
  .el-progress {
    .el-progress__text {
      color: var(--el-text-color-primary);
    }

    .el-progress-bar__outer {
      background-color: var(--el-fill-color-light);
    }
  }

  // ===== 时间线优化 =====
  .el-timeline {
    .el-timeline-item__timestamp {
      color: var(--el-text-color-secondary);
    }

    .el-timeline-item__content {
      color: var(--el-text-color-primary);
    }
  }
}
